<template>
  <div>
    <el-card class="card">
      <HomeCard :HomeData="HomeData" v-if="HomeData.length"></HomeCard>
    </el-card>
    <el-card class="card">
      <EchartVisits :HomeData="HomeData" v-if="HomeData.length"></EchartVisits>
    </el-card>
    <el-card class="card">
      <EchartArticle
        :HomeData="HomeData"
        :labelData="store.state.lableData"
        v-if="HomeData.length"
      ></EchartArticle>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, inject, defineAsyncComponent } from 'vue'
import { getEndData } from '@/utils/frontHome'
const store: any = inject('store')
// 引入
const HomeCard = defineAsyncComponent(
  () => import('@/components/home/HomeCard.vue')
)
// 引入周访问量
const EchartVisits = defineAsyncComponent(
  () => import('@/components/home/EchartVisits.vue')
)
// 引入图书Echart
const EchartArticle = defineAsyncComponent(
  () => import('@/components/home/EchartArticle.vue')
)
const HomeData = ref<any[]>([])
// 请求标签
store.GetLableData()
getEndData().then((res) => {
  HomeData.value = res.data
})
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 20px;
}
</style>
